/**
 * 供应商资料
 */
import * as React from 'react'
import { Card, Form, Spin, Button } from 'antd'
import Authentication from '../../router/Authentication'
import { FormComponentProps } from 'antd/lib/form/Form'
import { PageHeaderLayout, DescriptionList, Description, SignleUpload } from '../../components'
const FormItem = Form.Item

export interface Props{
  record: any
  recordInfo: (param: any) => void
  loading: any
  history: any
}

export interface State {
  tab: string,
}

const tabList = [
  {
    key: 'baseInfo',
    tab: '基础资料',
  },
  {
    key: 'certificateInfo',
    tab: '证件资料',
  },
]

@Authentication
class SupplierInfo extends React.Component<Props & FormComponentProps, State> {

  state = {
    tab: tabList[0].key,
  }

  componentDidMount () {
    const { recordInfo } = this.props
    recordInfo({type: 0})
  }

  onTabChange = (tab: string) => {
    this.setState({
      ...this.state,
      tab
    })
  }
  
  render () {
    const { record, loading } = this.props
    const { tab } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    }
    return (
      <PageHeaderLayout 
        title = ""
        tabList={tabList}
        onTabChange = {this.onTabChange}
        tabDefaultActiveKey = "baseInfo">
        <Card bordered={false}>
          {tab == 'baseInfo'?(<DescriptionList size="large" title="基本信息" style={{ marginBottom: 32 }}>
            <Description term="供应商编码">{record.venderid}</Description>
            <Description term="供应商名称">{record.vendername}</Description>
            <Description term="供应商地址">{record.address}</Description>
            <Description term="联系人">{record.cman}</Description>
            <Description term="联系电话">{record.cmanphone}</Description>
            <Description term="传真">{record.faxno}</Description>
            <Description term="开户行">{record.bankname}</Description>
            <Description term="银行账号">{record.bankaccount}</Description>
            <Description term="采购员">{record.invendee}</Description>
          </DescriptionList>): (
          <Form>
            <FormItem label="营业执照" {...formItemLayout}>
              <SignleUpload name="营业执照1" />
              <SignleUpload name="营业执照2"/>
            </FormItem>
            <FormItem label="身份证" {...formItemLayout}>
              <SignleUpload name="身份证1"/>
              <SignleUpload name="身份证2"/>
            </FormItem>
            <FormItem label="工厂车间照" {...formItemLayout}>
              <SignleUpload name="工厂车间照1"/>
              <SignleUpload name="工厂车间照2"/>
              <SignleUpload name="工厂车间照3"/>
              <SignleUpload name="工厂车间照4"/>
            </FormItem>
            <FormItem label="税务登记证" {...formItemLayout}>
              <SignleUpload name="税务登记证1"/>
              <SignleUpload name="税务登记证2"/>
              <SignleUpload name="税务登记证3"/>
              <SignleUpload name="税务登记证4"/>
            </FormItem>
            <FormItem label="组织机构代码证" {...formItemLayout}>
              <SignleUpload name="组织机构代码证1"/>
              <SignleUpload name="组织机构代码证2"/>
            </FormItem>
            <FormItem label="商标注册证" {...formItemLayout}>
              <SignleUpload name="商标注册证1"/>
              <SignleUpload name="商标注册证2"/>
            </FormItem>
            <FormItem label="品牌销售授权书" {...formItemLayout}>
              <SignleUpload name="品牌销售授权书1"/>
              <SignleUpload name="品牌销售授权书2"/>
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button style={{ marginLeft: 8 }} >取消</Button>
            </FormItem>
          </Form>)}
        </Card>
        <Spin size="large" spinning={loading} style={{ width: "100%", margin: "40px 0" }} />
      </PageHeaderLayout>
    )
  }
}
export default Form.create()(SupplierInfo)
